<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>设置新密码界面</title>

    <link rel="stylesheet" href="bootstrap-4.6.1-dist/css/bootstrap.min.css">
    <style>
        body{
            margin:0px;
            padding:0px;
            font-family:sans-serif;
            background: url(img/userFindPassword_bg.jpg);
            background-size:cover;
        }
        .box{
            position:absolute;
            top:50%;
            left:50%;
            transform:translate(-50%,-50%);
            /*实现块元素百分比下居中*/
            width:450px;
            padding:50px;
            background: rgba(0,0,0,.7);
            box-sizing:border-box;
            box-shadow: 0px 15px 25px rgba(0,0,0,.5);
            border-radius:15px;
        }
        .box h2{
            margin:0 0 30px;
            padding:0;
            color: white;
            text-align:center;
        }
        .box h5{
            margin:0 0 30px;
            padding:0;
            color: #fff;
            text-align:left;
        }
        .box .inputbox{
            position:relative;
        }
        .box .inputbox input{
            width: 100%;
            padding:10px 0;
            font-size:16px;
            color:#fff;
            letter-spacing: 1px;
            margin-bottom: 30px;
            border:none;
            border-bottom: 1px solid #fff;
            outline:none;
            background: transparent;
        }
        .box .inputbox label{
            position:absolute;
            top:0px;
            left:0px;
            padding:10px 0;
            font-size: 16px;
            color:#fff;
            pointer-events:none;
            transition:.5s;
        }
        .box .inputbox input:focus ~ label,
        .box .inputbox input:valid ~ label
        {
            top:-18px;
            left:0;
            color:#03a9f4;
            font-size:14px;
        }
        .box input[type="submit"],
        .box a
        {
            border: none;
            outline:none;
            font-size: 12px;
            color:#fff;
            padding:15px 20px;
            cursor: pointer;
            border-radius:10px;
        }
    </style>
</head>
<body>
<div class="box">
    <h2>爱思教育</h2>
    <h5>找回密码</h5>
    <form id="form">
        <div class="inputbox">
            <input type="text" name="userPhone" id="userPhone"  required="">
            <label>注册使用的手机号*</label>
        </div>
        <div class="inputbox">
            <input type="password" name="newPassword" id="newPassword" required="">
            <label>新密码*</label>
        </div>

        <div class="inputbox">
            <input type="password" name="confirmNewPassword" id="confirmNewPassword" required="">
            <label>确认密码*</label>
        </div>

        <div class="col-4">
            <div class="row"></div>
            <input class="row btn btn-primary text-center" id="btnChangePassword" type="button" value="修改">
            <div class="row"></div>
        </div>
    </form>
</div>
</body>
<script src="jquery/jquery-3.6.0.min.js"></script>
<script>
    jQuery(function () {
        jQuery("#btnChangePassword").click(function () {
            let form=jQuery("#form").serialize();<!-- 获取表单的数据-->

            var Pwd=document.getElementById("newPassword").value.trim();
            var confirmPwd=document.getElementById("confirmNewPassword").value.trim();
            var userPhone=document.getElementById("userPhone").value.trim();
            if(userPhone.length<11||userPhone.length>11)//测试手机号长度是否正确
            {alert('请输入长度为11的手机号！');return false;}
            if(Pwd.length<6){alert("请输入长度不小于6的密码！");return false;}//测试密码长度
            if(Pwd!=confirmPwd){alert("两次密码输入不一致！");return false;}
            jQuery.post("user/changePassword",form,function (rst) {
                if(rst>=1){
                    let trs='修改成功';
                    alert(trs);
                    $(location).attr("href","userLogin.html");//注册成功后跳转至登录界面
                }
                else {alert('修改失败');}
            });
        });
    })
</script>

</html>